<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>市场数据</title>
<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #000000;
    overflow: hidden;
  }

  /* 整体容器 */
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-size: 10px;
    color: white;
    position: relative;
  }

  /* 新增顶部色条：强度显示 */
  .top-top-bar {
    height: 3px;
    border-radius: 3.5px;
    overflow: hidden;
    width: 100%;
    background-color: white;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .strength-bar {
    height: 100%;
    transition: width 0.3s ease;
    position: absolute;
    top: 0;
  }

  /* 上部分：上涨/下跌家数 */
  .top-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000000;
    padding: 2px 4px;
    box-sizing: border-box;
    flex: 1;
  }

  .arrow {
    font-size: 10px;
    vertical-align: middle;
    color: white;
    position: relative;
    top: -1px;
    margin-right: 2px;
  }

  .up-count {
    color: #FF0000;
    font-weight: normal;
  }

  .down-arrow {
    font-size: 10px;
    vertical-align: middle;
    color: white;
    position: relative;
    top: -1px;
  }

  .down-count {
    color: #00FF00;
    font-weight: normal;
  }

  /* 中间部分：涨跌停 */
  .middle-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000000;
    padding: 2px 4px;
    box-sizing: border-box;
    flex: 1;
  }

  .title {
    color: #FFFFFF;
    font-weight: normal;
    font-size: 10px;
  }

  .limit-count {
    display: flex;
    gap: 4px;
    font-size: 10px;
  }

  .limit-up {
    color: #FFFF00;
    font-weight: normal;
  }

  .limit-down {
    color: #00FFFF;
    font-weight: normal;
  }

  /* 下部分：强度 + 成交金额 */
  .bottom-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000000;
    padding: 2px 4px;
    box-sizing: border-box;
    flex: 1;
  }

  .strength-value {
    margin-left: 4px;
    font-weight: normal;
    font-size: 10px;
  }

  .amount {
    font-weight: normal;
    font-size: 10px;
  }

  .trillion-unit {
    font-size: 7px;
  }

  .strength-value.green {
    color: #00FF00;
  }

  .strength-value.lightgray {
    color: #D0D0D0;
  }

  .strength-value.orange {
    color: #FFA500;
  }

  .strength-value.MAGENTA {
    color: #FF00ff;
  }

  /* 底部横条：上涨、持平、下跌占比 */
  .bottom-bar {
    height: 3px;
    border-radius: 3.5px;
    overflow: hidden;
    width: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .bar-segment {
    height: 100%;
    position: absolute;
    top: 0;
    transition: width 0.3s ease;
  }

  #upBar {
    background-color: #ff0000;
  }

  #flatBar {
    background-color: #d0d0d0;
  }

  #downBar {
    background-color: #00ff00;
  }
</style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
</head>
<body>
    <!-- 主体容器 -->
    <div class="container">
        <!-- 新增顶部色条 -->
        <div class="top-top-bar">
            <div class="strength-bar" id="topStrengthBar" style="width: 0%;"></div>
        </div>

        <!-- 上部分 -->
        <!-- <div class="top-section">
            <div class="flex items-center">
                <span class="arrow">↑</span><span class="up-count" id="upCount">0</span>
            </div>
            <div class="flex items-center">
                <span class="arrow down-arrow">↓</span><span class="down-count" id="downCount">0</span>
            </div>
        </div> -->

        <!-- 中间部分 -->
        <!-- <div class="middle-section">
            <div class="title">涨跌停</div>
            <div class="limit-count">
                <span class="limit-up" id="limitUp">0</span>/<span class="limit-down" id="limitDown">0</span>
            </div>
        </div> -->

        <!-- 下部分 -->
        <div class="bottom-section">
            <div class="flex items-center">
                <div class="flex items-center">
                  <span class="arrow">↑</span><span class="up-count" id="upCount">0</span>
                </div>
                <div class="flex items-center">
                    <span class="arrow down-arrow">↓</span><span class="down-count" id="downCount">0</span>
                </div>
            </div>

              <div class="flex items-center">
                  <div class="flex items-center">
                    <span class="title" id="strengthTitle">强度&nbsp;&nbsp;&nbsp;</span>
                    <span class="strength-value" id="strengthValue">0</span>
                  </div>
                  <div class="flex items-center"> 
                    <span class="title" id="strengthTitle">涨跌停</span>
                      <span class="limit-up" id="limitUp">0</span>/<span class="limit-down" id="limitDown">0</span>
                  </div>
              </div>

              <div class="flex items-center">
                  <div class="flex items-center">
                     <span id="amount">0.00</span><span class="trillion-unit">万亿</span>
                  </div>
                  <div id="yuce" class="flex items-center">
                    <span class="trillion-unit"> 预</span>
                      <span id="ycamount">0.00</span><span class="trillion-unit">万亿</span>
                  </div>
              </div>
   
        </div>

        <!-- 底部横条 -->
        <div class="bottom-bar">
            <div class="bar-segment" id="upBar" style="width: 0%;"></div>
            <div class="bar-segment" id="flatBar" style="width: 0%;"></div>
            <div class="bar-segment" id="downBar" style="width: 0%;"></div>
        </div>
    </div>

    <script>
        const url1 = "https://apphq.longhuvip.com/w1/api/index.php?a=DiskReview&apiv=w30&c=HomeDingPan";
        const url2 = "https://apphq.longhuvip.com/w1/api/index.php?a=ZhangFuDetail&apiv=w21&c=HomeDingPan";
        const url3 = "https://apphq.longhuvip.com/w1/api/index.php?a=MarketCapacity&apiv=w31&Type=0&c=HomeDingPan";

        let res1, res2,res3;
        let dssx = 0;

        function fetchMarketInfo() {
            $.ajax({ url: url1, dataType: "text", async: false, success: data => res1 = data });
            $.ajax({ url: url2, dataType: "text", async: false, success: data => res2 = data });
            $.ajax({ url: url3, dataType: "text", async: false, success: data => res3 = data });

            if (res1 && res2) {
                try {
                    const data1 = JSON.parse(res1), data2 = JSON.parse(res2), data3 = JSON.parse(res3);
                    const ms = parseInt(data1.info.strong || 0);
                    const uc = parseInt(data2.info.SZJS || 0);
                    const dc = parseInt(data2.info.XDJS || 0);
                    const lu = parseInt(data2.info.SJZT || 0);
                    const ld = parseInt(data2.info.SJDT || 0);
                    //const amt = (data2.info.last || 0) / 1e8;
                    // const zramt = (data2.info.q_zrcs || 0) / 1e8;
                    // const zzlv = (amt-zramt)/zramt;
                    // const zrqtamt=(data2.info.q_zrtj || 0) / 1e8;
                    // const ycamt = zrqtamt*(1+zzlv);
                    const amt = (data3.info.last || 0) / 1e8;
                    const ycamt = (data3.info.yclnstr.split('亿')[0] || 0) / 1e4;
                    const fc = Number(data2.info['0'] || 0); // 持平家数

                    const total = uc + dc + fc;
                    const upPercent = total ? (uc / total * 100) : 0;
                    const flatPercent = total ? (fc / total * 100) : 0;
                    const downPercent = total ? (dc / total * 100) : 0;

                    // 强度颜色逻辑
                    let strengthClass = '';
                    let strengthColor = '';
                    if (ms < 30) {
                        strengthClass = 'green';
                        strengthColor = '#00FF00'; 
                    } else if (ms < 50) {
                        strengthClass = 'lightgray';
                        strengthColor = '#D0D0D0';
                    } else if (ms < 70) {
                        strengthClass = 'orange';
                        strengthColor = '#FFA500';
                    } else {
                        strengthClass = 'MAGENTA';
                        strengthColor = '#FF00FF';
                    }

                    $('#upCount').text(uc);
                    $('#downCount').text(dc);
                    $('#limitUp').text(lu);
                    $('#limitDown').text(ld);
                    $('#strengthValue')
                        .text(ms)
                        .removeClass('green lightgray orange MAGENTA')
                        .addClass(strengthClass);
                    $('#amount').text(amt.toFixed(2));
                    $('#ycamount').text(ycamt.toFixed(2));

                    if(amt.toFixed(2)>ycamt.toFixed(2)){
                      $('#yuce').css('color', '#00FF00');
                    }

                    if(amt.toFixed(2)<ycamt.toFixed(2)){
                      $('#yuce').css('color', '#FF0000');
                    }

                    $('#topStrengthBar').css({ width: `${ms}%`, backgroundColor: strengthColor });
                    $('#strengthTitle').css('color', strengthColor);

                    $('#upBar').css({ width: `${upPercent}%`, left: '0%' });
                    $('#flatBar').css({ width: `${flatPercent}%`, left: `${upPercent}%` });
                    $('#downBar').css({ width: `${downPercent}%`, left: `${upPercent + flatPercent}%` });
                } catch (e) {
                    console.error('数据解析错误:', e);
                }
            }
        }

        function time_range(beginTime, endTime) {
            var strb = beginTime.split(":");
            if (strb.length != 2) return false;
            var stre = endTime.split(":");
            if (stre.length != 2) return false;

            var b = new Date();
            var e = new Date();
            var n = new Date();

            b.setHours(strb[0]);
            b.setMinutes(strb[1]);
            e.setHours(stre[0]);
            e.setMinutes(stre[1]);

            if (n.getTime() - b.getTime() > 0 && n.getTime() - e.getTime() < 0) {
                dssx++;
                if (dssx == 3) dssx = 0;
                fetchMarketInfo();
                return true;
            } else {
                return false;
            }
        }

        $(function () {
            setInterval(function () {
                time_range("9:15", "11:30");
                time_range("13:00", "15:10");
            }, 6000);
        });

        window.onload = () => {
            fetchMarketInfo();
        };
    </script>
</body>
</html>